<script setup lang="ts">
import { computed, ref } from "vue";
import { Container } from "typedi";
import { ClButton } from "@chulei-ui/components";
import { computedAsync } from "@vueuse/core";
import { PlanetService } from "../../repositories/plants/PlanetService";
import { esi } from "../../repositories";
import { useCacheStore } from "../../sde/cache";
import { PLANET_MATERIAL } from "../../constant";
import type { Role } from "../../repositories/role/entity";
import type { PlanetResourceTreeItem } from "~components/tree";
import { PlanetResourceTree, SystemTree } from "~components/tree";
import { AuthRoleSelect } from "~pages/select";

import PlayersPlanets from "~pages/plants/PlayersPlanets.vue";
import SelectionPlanetSchematics from "~pages/plants/SelectionPlanetSchematics.vue";
import UniverseTypeIcon from "~components/universe-type/UniverseTypeIcon.vue";

const level = ref<0 | 1 | 2 | 3 | 4>(4);

const showPrice = ref(false);
const cacheStore = useCacheStore();
/**
 * 选中的产物
 */
const choosePlanetSchematics = ref<PlanetResourceTreeItem[]>([]);
const selectSystemId = ref<number>();

const playerIds = ref<number[]>();
const plantService = Container.get(PlanetService);
const players = ref<Role[]>([]);
const choosePlanetIds = ref<number[]>([]);

const planets = computedAsync(async () => {
  if (selectSystemId.value) {
    const system = (await esi.universe.system(selectSystemId.value))!;
    return (await Promise.all(system.planets.map((p) => esi.universe.planet(p.planet_id)))).map((planet) => {
      const type = cacheStore.getType(planet!.type_id)!;
      return {
        ...planet,
        name: `${system.name} ${planet!.name.replace(/\D/g, "")}`,
        type,
        material: PLANET_MATERIAL[type.name].map((e) => {
          return cacheStore.getType(e)!;
        }),
      };
    });
  }
  return [];
});

//最终选中的行星产物和星球的分配
const choosePlanets = computed(() => {
  return planets.value?.filter(
    (planet) => choosePlanetIds.value.length === 0 || choosePlanetIds.value.includes(planet.planet_id!)
  );
});
const fetch = async () => {
  players.value = await plantService.getPlanets(playerIds.value);
  console.log(players.value);
};
</script>

<template>
  <el-space>
    <el-select v-model="level" placeholder="请选择行星产物等级">
      <el-option :label="`P0`" :value="0" />
      <el-option v-for="i in 4" :key="i" :label="`P${i}`" :value="i" />
    </el-select>
    <AuthRoleSelect v-model="playerIds" multiple />
    <cl-button @click="fetch">抓取</cl-button>
    <el-checkbox v-model="showPrice">显示价格</el-checkbox>
  </el-space>
  <PlayersPlanets :players="players" />
  <el-divider>行星材料</el-divider>
  <el-row>
    <el-col :span="12">
      <PlanetResourceTree v-model="choosePlanetSchematics" :level="level" :show-price="showPrice" />
    </el-col>
    <el-col :span="12">
      <SystemTree v-model="selectSystemId" type="system" />
      <el-checkbox-group v-model="choosePlanetIds">
        <el-checkbox v-for="planet in planets" :key="planet.planet_id" :value="planet.planet_id">
          <div class="flex">
            <UniverseTypeIcon :id="planet.type!.id" />
            {{ planet.name }} {{ planet.type!.name }}
            <el-tooltip v-for="material in planet.material" :key="material.id" :content="material.name">
              <UniverseTypeIcon :id="material.id" />
            </el-tooltip>
          </div>
        </el-checkbox>
      </el-checkbox-group>
      <el-divider />
      <SelectionPlanetSchematics :planet-schematics="choosePlanetSchematics" :planets="choosePlanets" />
    </el-col>
  </el-row>
</template>

<style lang="scss"></style>
